<template>
	<view class="entrust-add">
		<view class="entrust-top">
			<image :src="$imgUrl + '/index/entrust1.png'" class="image-icon" mode=""></image>
		</view>
		<view class="entrust-form">
			<view class="entrust-tips">我要委托</view>
			<uni-forms :modelValue="formData" class="form-s">
				<uni-forms-item label="姓名" :label-width="150" required>
					<input type="text" maxlength="20" v-model="formData.name" placeholder="请输入您的姓名" />
				</uni-forms-item>
				<uni-forms-item label="您的联系方式" :label-width="150" required>
					<input type="number" maxlength="11" v-model="formData.phone" placeholder="请输入联系电话" disabled />
				</uni-forms-item>
				<uni-forms-item label="验证码" :label-width="150" required>
					<view class="getMsg-cla">
						<input type="number" maxlength="6" v-model="formData.captcha" placeholder="请输入验证码" />
						<span class="getMsg" v-if="!sendMsg" @click="sendVerifyCode">获取验证码</span>
						<span class="resetGet" v-else>重新获取{{seconds}}s</span>
					</view>
				</uni-forms-item>
				<uni-forms-item label="看房时间" :label-width="120">
					<view class="check-box">
						<uni-datetime-picker type="datetime" placeholder="请选择看房时间" :border="false" :hide-second="true" :start="nowTime" v-model="formData.viewingTime" @change="changeTime" />
						<image :src="$imgUrl + '/personal/next-icon.png'" class="check-icon" mode=""></image>
					</view>
				</uni-forms-item>
				<uni-forms-item label="房源地址" :label-width="150">
					<view class="check-box">
						<input type="text" v-model="formData.district" @click="show = true" disabled placeholder="请选择区域"/>
						<image :src="$imgUrl + '/personal/next-icon.png'" class="check-icon" mode=""></image>
					</view>
				</uni-forms-item>
				<uni-forms-item class="uni-sug">
					<view class="uni-sug-t">
						<textarea class="uni-sug-textarea" maxlength="150" v-model="formData.area" placeholder="详细地址"></textarea>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="submit" @click="submit">确认提交</view>
		</view>
	</view>
	<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="confirm"></u-picker>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { personalEntrust } from '@/common/API/room'
import { onLoad } from "@dcloudio/uni-app"
import { getCode } from '@/common/API/login'
import common from '@/utils/common'
const show = ref(false)
const sendMsg = ref(false)
const seconds = ref(60)
const nowTime = ref()
const formData = reactive({
	name: '',
	phone: uni.getStorageSync('userPhone'),
	source:'',
	district:'',
	area: '',
	viewingTime: '',
	captcha: ''
})
const columns = reactive([common.districtArr])

onLoad((options) =>{
	nowTime.value = new Date().getTime();
})

const changeTime = (e)=>{
	let now = new Date().getTime();
	let bookTime = new Date(e).getTime();
	if(now>bookTime){
		uni.showToast({
			title:'不能小于当前时间',
			icon: "none"
		});
	};
}

//弹窗确认
const confirm = (e) => {
	show.value = false
	formData.district = e.value[0]
}

// 提交
const submit = async ()=>{
	if(!formData.name){
		uni.showToast({
			title:'请输入您的姓名',
			icon:'none'
		})
	}else{
		let data = {
			name: formData.name,
			phone: formData.phone,
			area: formData.district+formData.area,
			viewingTime: formData.viewingTime,
			captcha: formData.captcha
		}
		// #ifdef MP-WEIXIN
		data.source = 6
		// #endif
		// #ifndef MP-WEIXIN
		data.source = 18
		// #endif
		let res = await personalEntrust(data)
		uni.showToast({
		  title: "提交成功"
		})
		setTimeout(()=>{
			uni.navigateBack()
		},2000)
	}
}

const  sendVerifyCode = async ()=> {
	let data = {
		mobile: formData.phone,
		scene: 3
	};
	uni.showLoading();
	let res = await getCode(data)
	uni.hideLoading();
	sendMsg.value = true
	var interval = setInterval(() => {
		--seconds.value
	}, 1000)
	setTimeout(() => {
		clearInterval(interval)
		sendMsg.value = false
		seconds.value = 60
	}, 60000);
}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
.entrust-add{
	padding-bottom: 20rpx;
	.entrust-top{
		image{
			width: 686rpx;
			height: 384rpx;
			margin: 32rpx 32rpx 0 32rpx;
		}
	}
	.entrust-form{
		position: relative;
		.entrust-tips{
			margin: 48rpx 32rpx 0 32rpx;
			color: rgba(0, 0, 0, 1);
			font-size: 32rpx;
			font-weight: bold;
		}
		.uni-forms-item{
			background: #fff;
			align-items: center;
			padding: 20rpx 32rpx;
			margin: 0;
			uni-input{
				font-size: 28rpx;
			}
			::v-deep.uni-input-wrapper{
				text-align: right;
			}
			::v-deep.uni-forms-item__label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
			}
			::v-deep.uni-date{
				text-align: right;
				.icon-calendar{
					display: none;
				}
				.uni-date__x-input{
					padding: 0;
				}
			}
			.check-icon{
				width: 16rpx;
				height: 28rpx;
				margin-left: 20rpx;
			}
			.check-box{
				flex: 1;
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: right;
			}
			.getMsg{
				width: 160rpx;
				font-size: 24rpx;
				color: rgba(253, 150, 24, 1);
				text-align: right;
			}
		}
		.uni-sug-textarea{
			background: rgba(245, 245, 245, 1);
			padding: 24rpx;
			width: 638rpx;
			height: 210rpx;
		}
	}
	.resetGet{
		display: inline-block;
		width: 200rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		color: rgba(253, 150, 24, 1);
	}
	.getMsg-cla{
		display: flex;
		align-items: center;
	}
	.submit{
		border-radius: 200rpx;
		background: rgba(253, 150, 24, 1);
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		padding: 20rpx 0;
		margin: 86rpx 32rpx 68rpx;
	}
}
::v-deep.uni-forms-item{
	padding: 0 32rpx;
}
</style>